<script setup lang="ts">
import { ref, defineProps, defineEmits, PropType } from 'vue'

import { Search } from '@element-plus/icons-vue'
import { EnumType } from '@/consts/public'

const emit = defineEmits(['search', 'defaultButtonoption'])
const props = defineProps({
  showSearch: {
    type: Boolean,
    default: true
  },
  showButtons: {
    type: Boolean,
    default: true
  },
  optionsList: {
    type: Array as PropType<EnumType[]>,
    default: () => []
  },
  defaultButtonText: {
    type: String,
    default: '新建'
  }
})

const placeholder = props.optionsList[0]?.label ? props.optionsList[0].label : '请选择'
const defaultSearchWay = props.optionsList[0]?.value ? props.optionsList[0].value : ''

const searchValue = ref('')
const searchWay = ref(defaultSearchWay)

</script>

<template>
<div class="option-panel">
  <div v-if="showSearch">
    <slot name="option-left">
      <el-input
        v-model="searchValue"
        class="search-input"
      >
        <template #prepend>
          <el-select v-model="searchWay" :placeholder="placeholder" style="width: 110px">
            <el-option v-for="option in props.optionsList" :key="option.value" :label="option.label" :value="option.value" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="() => emit('search', {[searchWay]: searchValue})"/>
        </template>
      </el-input>
    </slot>
  </div>
  <el-space v-if="showButtons" :size="10" spacer="vertical">
    <slot name="option-right">
      <el-button type="primary" @click="() => emit('defaultButtonoption')">{{props.defaultButtonText}}</el-button>
    </slot>
  </el-space>
</div>
</template>

<style lang="scss" scoped>
.demo-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
.option-panel {
  display: flex;
  justify-content: space-between;
  width: 500xp;
  margin-bottom: 20px;
  .search-input {
    width: 500px;
  }
}
</style>
